<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #sub_menu_1,#sub_menu_2{
            display: none;
        }

        ul li:hover{
            cursor: 2;
        }
    </style>
</head>

<body>
    <ul>
        <li onclick="f('sub_menu_1')">一级菜单1
            <ul id="sub_menu_1">
                <li>二级菜单1</li>
                <li>二级菜单1</li>
                <li>二级菜单1</li>
                <li>二级菜单1</li>
            </ul>
        </li>
    </ul>
    <ul>
        <li onclick="f('sub_menu_2')">一级菜单1
            <ul id="sub_menu_2">
                <li>二级菜单2</li>
                <li>二级菜单2</li>
                <li>二级菜单2</li>
                <li>二级菜单2</li>
            </ul>
        </li>
        <li>一级菜单3</li>
    </ul>
    <script>
    function f(str){
        var sub_menu=document.getElementById(str);
        var dis_v=sub_menu.style.display;

        if(dis_v=="block")
        sub_menu.style.display="none";
        else
        suv_menu.style.display="block";
    }
    </script>
</body>

</html>